<!--
/**
 * Created by PhpStorm.
 * User: Devmc
 * Date: 2021/4/23
 * Time: 0:54
 */
-->
<template>
  <div class="activity">
    <div class="notice-board">
      <div class="title">
        <h3>娱乐活动</h3>
      </div>

      <div class="outer-div">
        <ul class="inner-ul">

          <li v-for="item in tableData" :key="item.activityId">
            <div class="li-img-box">
              <img :src="item.thumb" alt=""/>
            </div>
            <div class="li-cont" @click="toAct(item.activityId)">
              <h3><a>{{ item.activityName }}</a></h3>
              <p class="li-p" v-html="item.content.replace(/<\/?.+?>/g, '')"></p>
            </div>
          </li>

        </ul>
      </div>
    </div>

    <!-- 分页 -->
    <el-pagination
        background
        layout="prev, pager, next"
        :page-count="totalCount"
        :current-page="currentPage"
        @current-change="changePage"
        :hide-on-single-page="true"
        class="page">
    </el-pagination>
  </div>
</template>

<script>
import modelAct from "../../models/activity";

export default {
  name: "MainActivity",
  props: {},
  data() {
    return {
      // 分页
      loading: true,
      currentPage: 1,
      totalCount: 1,

      // 数据
      tableData: []
    }
  },
  created() {
    /**
     * 获取数据
     */
    this.changePage(this.currentPage);
  },
  mounted() {

  },
  methods: {
    /**
     * 跳转
     *
     * @param id
     */
    toAct(id) {
      this.$router.push('/detail/act/' + id)
    },

    /**
     * 获取数据
     *
     * @param val
     */
    changePage(val) {
      this.currentPage = val;

      modelAct.getList({}, this.currentPage, 6)
          .then((response) => {
            this.tableData = response.records;
            this.totalCount = response.pages;
            this.loading = false;
          });
    }
  },
  watch: {}
}
</script>

<style lang="less" scoped>
.activity {
  .title {
    width: 100%;
    height: 56px;
    border-bottom: 1px solid #e2e2e2;

    h3 {
      font-size: 20px;
      line-height: 56px;
      color: #343434;
      font-weight: 600;
    }
  }

  /*官方公告右侧*/

  .notice-board .outer-div {
    width: 100%;
    padding-bottom: 50px;
    overflow: hidden;
  }

  .notice-board .outer-div .inner-ul {
    padding: 0 10px;
    overflow: hidden;
  }

  .notice-board .outer-div ul li {
    padding: 28px 0px;
    border-bottom: 1px solid #e2e2e2;
    overflow: hidden;
  }

  .notice-board .outer-div ul li:nth-child(4n) {
    border-bottom: 1px solid transparent;
  }

  .notice-board .outer-div ul li .li-img-box {
    float: left;
    width: 216px;
    margin-right: 30px;
  }

  .li-img-box img {
    width: 100%;
    height: auto;
  }

  .notice-board .outer-div ul li .li-cont {
    float: left;
    width: 606px;
    overflow: hidden;
    cursor: pointer;
  }

  .li-cont h3, .li-cont h3 a {
    font-size: 19px;
    font-family: "Microsoft YaHei";
    font-weight: 400;
    color: #343434;
  }

  .li-cont h3 a {
    display: block;
    font-size: 19px;
    color: #343434;
    height: 35px;
    line-height: 35px;
    overflow: hidden;
  }

  .li-cont h3, .li-cont h3 a:hover {
    color: #A74242;
  }

  .li-cont p {
    height: 84px;
    line-height: 28px;
    margin-top: 10px;
    font-size: 15px;
    color: #373737;
    overflow: hidden;
  }
}
</style>